<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt pt10">

          <vxe-table
              border="inner"
              ref="xTable"
              class="mt20"
              :loading="loading"
              :columns="columns1"
              :data="agreementList">
            <vxe-column field="name" :title="$t('page.supplier.agreements')" min-width="250"></vxe-column>
            <vxe-column field="version" :title="$t('page.supplier.version')" min-width="190"></vxe-column>
            <vxe-column field="signing_time" :title="$t('page.supplier.execution_date')" min-width="190">
              <template v-slot="{ row }">
                <span>{{ formatTimeNative(row.created_at) }}</span> <!-- 调用格式化方法 -->
              </template>
            </vxe-column>
            <vxe-column field="action" :title="$t('page.order.operate')" min-width="190">
              <template v-slot="{ row }">
                <a @click="select(row)">{{ $t('page.stock.view') }}</a>
              </template>
            </vxe-column>

          </vxe-table>
        </Card>
      <Modal
          v-model="is_show"
          scrollable
          :title="$t('page.supplier.agreements')"
          :closable="true"
          width="60%"
          :footer-hide="true"
          :mask-closable="false"
      >
        <iframe id='IEIframe' width="100%" height="100%" :src="iframe_url"
                frameborder="0"></iframe>
      </Modal>
    </div>
</template>

<script>
import {supplier, putSupplier, cityApi, supplierAgreementList} from "@/api/setting";
    import { mapMutations } from "vuex";
    export default {
        name: 'index',
        components: {},
        data() {
            return {
                formValidate: {
                    supplier_name: '',
                    name: '',
                    email: '',
                    phone: '',
                    detailed_address: '',
                    province:0,
                    city:0,
                    area:0,
                    street:0,
                    addressSelect:[],
                    address:''
                },
                iframe_url:"",
                is_show:false,
                loading:false,
                agreementList:[],
                urlList: ["http://supplier.vanitii-global.com/uploads/file/EuzC2LtnvAcmRDI7PbfkdiyKOU1wFV8h.png",'http://supplier.vanitii-global.com/uploads/file/CYVXEgIyKMiHwTbuDOzkLj1chG56eBpN.png'],
                addresData: [],
                ruleValidate: {
                    supplier_name: [
                        { required: true, message: '请输入供应商名称', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' },
                    ]
                }
            }
        },
        created() {
            this.getInfo();
            this.getSupplierAgreementList();
            let data = {pid:0}
            this.cityInfo(data);
        },
        mounted() {
            this.setCopyrightShow({ value: false });
        },
        destroyed () {
            this.setCopyrightShow({ value: true });
        },
        computed:{
          columns1(){
            return [
              {
                title: $t('page.supplier.agreements'),
                key: 'name',
                minWidth: 150
              },
              {
                title: $t('page.supplier.version'),
                key: 'version',
                minWidth: 250
              },
              {
                title: $t('page.supplier.execution_date'),
                key: 'signing_time',
                minWidth: 180
              },
              {
                title: $t('page.order.operate'),
                slot: 'action',
                fixed: 'right',
                minWidth: 120
              }
            ]
          },
        },
        methods: {
            ...mapMutations('store/layout', [
                'setCopyrightShow'
            ]),
          // 原生 JS 格式化
          formatTimeNative(timestamp) {
            const date = new Date(timestamp);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}`;
          },
            cityInfo(data){
                cityApi(data).then(res=>{
                    this.addresData = res.data
                })
            },
            getInfo(){
                supplier().then(res=>{
                    this.formValidate = res.data.info;
                }).catch(err=>{
                    this.$Message.error(err.msg);
                })
            },
            getSupplierAgreementList(){
              this.loading = true
              supplierAgreementList().then(res=>{
                this.agreementList = res.data.info;
                this.loading = false
              }).catch(err=>{
                this.$Message.error(err.msg);
              })
            },
          select (row) {
            console.log("row:",row);

            const pdfUrl = row.file_url  // PDF 的实际链接
            const link = document.createElement('a')
            link.href = pdfUrl
            link.download = '报告.pdf'  // 保存文件名
            link.target = '_blank'     // 防止拦截
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)

            // this.is_show = true
            // this.iframe_url = row.file_url
            // console.log("this.iframe_url:",this.iframe_url )
          }
        }
    }
</script>

<style lang="less" scoped>
    .input{
        max-width: 460px;
    }
    .fixed-card {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 200px;
        z-index: 10;
        box-shadow: 0 -1px 2px rgb(240, 240, 240);

        /deep/ .ivu-card-body {
            padding: 15px 16px 14px;
        }

        .ivu-form-item {
            margin-bottom: 0;
        }

        /deep/ .ivu-form-item-content {
            margin-right: 124px;
            text-align: center;
        }

        .ivu-btn {
            height: 36px;
            padding: 0 20px;
        }
    }
</style>
